<template>
    <div class="listTwo">
        <h2>ListTwo 显示</h2>
        <ul>
            <li v-for="list in newLists">
                <span class="name">{{list.name}}</span>
                <span class="price"> ${{list.price}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'listtwo',
        // props: {
        //     lists: Array
        // }
        computed: {
            lists(){
                return this.$store.state.lists;
            },
            newLists() {
                return this.$store.getters.newLists;
            }
        }
    }
</script>

<style scoped="">
    .listTwo{
        background: #D1E4FF;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
        margin-bottom: 30px;
        padding: 10px 20px;
    }
    .listTwo ul{
        padding: 0;
        list-style-type: none;
    }
    .listTwo li{
        margin-right: 10px;
        margin-top: 10px;
        padding: 20px;
        background: rgba(255,255,255,0.7);
    }
    .price{
        font-weight: bold;
        color: #860CE8;
        display: block;
    }
</style>